<template>
  <div class="watch">
    <headerNav></headerNav>

    <div class="titlee">
      <div class="top">豆果美食,会做饭很酷~</div>
      <div class="midden">你关注人的动态会出现在这</div>
      <div class="buttom">为你推荐了一些有趣的人快关注TA们吧</div>
    </div>
    <!-- -->
    <van-loading v-if="!watch" size="30px" vertical>加载中...</van-loading>

    <div class="Content">
      <div class="content" v-for="(item, index) in watch" :key="index">
        <div class="title">
          <div class="left">
            <div class="userimg">
              <img :src="item.u.p" alt="" />
            </div>
            <div class="userinfo">
              <div class="top">
                <div class="username">{{ item.u.n }}</div>
                <div class="lv">LV.{{ item.u.lvl }}</div>
              </div>
              <div class="midden">
                <div class="fans">{{ item.u.followers_count_text }}</div>
                <div class="spot"></div>
                <div class="menu">{{ item.u.recipes_count_text }}</div>
              </div>
            </div>
          </div>
          <div
            :class="['right', item.media_type == 0 ? 'follow' : '']"
            @click.stop="togglee(index, item.media_type)"
          >
            {{ follow }}
          </div>
        </div>
        <router-link
          tag="div"
          :to="'/recipe/recipelist?id=' + item.share_info.object_id"
          class="img"
        >
          <img :src="item.img" alt="" />
        </router-link>

        <!-- -->
        <van-share-sheet
          v-model="showShare"
          title="立即分享给好友"
          :options="options"
        />

        <div class="Collection">
          <div class="items">
            <div
              class="item"
              v-for="value in item.collect_users"
              :key="value.id"
            >
              <img :src="value.p" alt="" />
            </div>

            <div class="num">{{ item.collect_count_text }}</div>
          </div>
          <div class="icon">
            <div
              :class="[
                'iconfont',
                item.like_state == 0
                  ? 'icon-shoucang'
                  : 'icon-shoucang-tianchong',
              ]"
              @click.stop="toggle(index, item.like_state)"
            ></div>
            <router-link
              tag="div"
              :to="'/recipe/recipelist?id=' + item.share_info.object_id"
              class="iconfont icon-pinglun"
            ></router-link>
            <div class="iconfont icon-zhuanfa" @click="showShare = true"></div>
          </div>
        </div>
        <!--  -->
        <div class="buttom">{{ item.trim_title }}</div>
      </div>
    </div>

    <footNav> </footNav>
  </div>
</template>

<script>
import footNav from "../base/footNav.vue";
import headerNav from "../base/headerNav.vue";

import { getWatch } from "../../api/home";

import { Toast } from "vant";
import Vue from "vue";
import { ShareSheet } from "vant";
import { Loading } from "vant";
Vue.use(Loading);
Vue.use(ShareSheet);
export default {
  data() {
    return {
      icon: true,
      watch: null,
      follow: "关注",
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
    };
  },
  methods: {
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    getWatchFun() {
      getWatch().then((data) => {
        this.watch = data.result.rfs;
        console.log(this.watch);
      });
    },
    toggle(index, like_state) {
      if (like_state == 0) {
        this.watch[index].like_state = 1;
        Toast("收藏成功");
      } else {
        this.watch[index].like_state = 0;
      }
    },
    togglee(index, media_type) {
      if (media_type == 0) {
        this.watch[index].media_type = 1;
        this.follow = "已关注";
      } else {
        this.watch[index].media_type = 0;
        this.follow = "关注";
      }
    },
  },
  created() {
    this.getWatchFun();
  },

  components: {
    headerNav,
    footNav,
  },
};
</script>
<style lang="less">
.watch {
  .titlee {
    background: #f7f7f7;
    padding: 20px 15px;
    margin-bottom: 10px;
    .top {
      color: #191919;
      font-size: 12px;
      margin-bottom: 12px;
      font-weight: bold;
    }
    .midden {
      color: #979797;
      font-size: 10px;
      margin-bottom: 6px;
    }
    .buttom {
      color: #979797;
      font-size: 10px;
    }
  }
  .Content {
    margin-bottom: 70px;
    .content {
      .title {
        display: flex;
        align-items: center;
        margin: 0 10px;
        justify-content: space-between;
        margin-bottom: 8px;
        .left {
          display: flex;
          align-items: center;
          .userimg {
            background: #000;
            width: 30px;
            height: 30px;
            border-radius: 50%;

            img {
              width: 30px;
              height: 30px;
              border-radius: 50%;
            }
          }
          .userinfo {
            margin-left: 8px;
            .top {
              display: flex;
              .username {
                color: #212121;
                font-size: 12px;
                font-weight: bold;
                margin-right: 10px;
              }
              .lv {
                color: #fdc837;
                font-size: 8px;
                font-weight: bold;
              }
            }
            .midden {
              display: flex;
              align-items: center;
              color: #7d7d7d;
              font-size: 12px;
              .fans {
              }
              .spot {
                background: #7d7d7d;
                width: 2px;
                height: 2px;
                margin: 0 5px;
              }
              .menu {
              }
            }
          }
        }
        .right {
          width: 60px;
          height: 25px;
          background: #f8c64b;
          border-radius: 30px;
          color: #200001;
          line-height: 25px;
          text-align: center;
          font-weight: bold;
          font-size: 12px;
        }
      }
      .img {
        width: 100%;
        margin-bottom: 8px;
        img {
          width: 100%;
        }
      }
      .Collection {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 10px;
        margin-bottom: 15px;
        .items {
          // position: relative;
          display: flex;
          align-items: center;
          .item {
            // position: absolute;
            background: #000;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            img {
              width: 15px;
              height: 15px;
              border-radius: 50%;
            }
          }
          .num {
            font-weight: bold;
            margin-left: 8px;
            color: #010101;
            font-size: 12px;
          }
        }
        .icon {
          display: flex;

          .iconfont {
            font-size: 22px;
            font-weight: bold;
          }
          .icon-shoucang-tianchong {
            color: #fdc837;
          }
          .icon-pinglun {
            margin: 0 20px;
          }
        }
      }
      .buttom {
        color: #1d1d1d;
        font-size: 12px;
        margin-left: 10px;
        margin-bottom: 20px;
      }
    }
  }
}
</style>